<!--
 * @FilePath: celery_flower.vue
 * @@author: wjj
 * @Date: 2025-08-27 19:34:48
 * @@Description: new js file
-->
<template>
  <div class="container" v-if="show">
    <el-link class="card-link" :href="flower_url" target="_blank">
      点击去消息队列
      <template #icon>
        <!-- 使用 iconfont 图标，类名根据你在 iconfont 项目中的设置 -->
        <svg-icon name="home" width="180px" height="180px"></svg-icon>
      </template>
    </el-link>
  </div>
  <div v-else>
    <iframe
      :src="flower_url"
      frameborder="0"
      style="width: 100%; height: 100vh"
    ></iframe>
    <!-- <el-link class="rabbit" :href="RabbitMQ_url" target="_blank">
      RabbitMQ后台
    </el-link>
    <el-link class="django" :href="django_url" target="_blank">
      Django后台
    </el-link> -->
  </div>
</template>

<script lang='ts' setup >
import { ref, reactive, onMounted, watch, nextTick } from 'vue'
//引入用户相关的小仓库

defineOptions({
  name: 'flower', //与路由名一致，可使用缓存
})
// 挂载完毕
let show = ref(false)
let flower_url = import.meta.env.VITE_CELERY_FLOWER
onMounted(() => {
  console.log(1111)
  if (import.meta.env.VITE_HTTPS_OPEN == 'true') {
    show.value = true
  }
})
//监控数据
//watch(select, (newVal, oldVal) => {})

console.log()
</script>
<style scope lang='scss'>
.django {
  color: black;
  position: fixed;
  top: 11%; /* 距离顶部0像素 */
  right: 1.8%; /* 距离左侧0像素 */
  overflow: hidden;
  font-weight: bold;
  // margin-top: 10px;
  z-index: 1000; /* 确保按钮在其他元素之上 */
  margin: 20px; /* 添加一些外边距避免紧贴边缘 */
  font-size: 25px;
  background-color: #f0ffeb;
  height: 50px;
}
.rabbit {
  color: black;
  position: fixed;
  top: 11%; /* 距离顶部0像素 */
  right: 180px; /* 距离左侧0像素 */
  overflow: hidden;
  font-weight: bold;
  // margin-top: 10px;
  z-index: 1000; /* 确保按钮在其他元素之上 */
  margin: 20px; /* 添加一些外边距避免紧贴边缘 */
  font-size: 25px;
  background-color: #f0ffeb;
  height: 50px;
}
</style>